<template>
  <div>
    <div class="roution">
      <el-carousel :interval="5000" arrow="always" height="456px">
        <el-carousel-item v-for="item in clearArr" :key="item.carouselId">
          <img :src="' http://www.codeedu.com.cn/' + item.url">
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="show">
      <div class="all">
        <div class="phone">{{ shoujiArr1.categoryName }}</div>
        <div class="one">
          <div class="phone-show">
            <div class="xiaomi">
              <img :src="' http://www.codeedu.com.cn/' + shoujiArr1.categoryPicture1" alt="" class="xiaomi">
            </div>
            <div class="more">
              <div class="card" v-for="item in picArr1" :key="item.productId"  @click="phone(item.productId)">
                <div class="card-pic" :style="{ 'background-image': 'url(http://www.codeedu.com.cn/' + item.productPicture }">
                  <div class="mingzi">
                    {{ item.productName }}
                  </div>
                  <div class="jieshao">
                    {{ item.productTitle }}
                  </div>
                  <div class="price">{{ item.productSellingPrice }}</div>
                  <div class="noprice">{{ item.productPrice }}</div>
                  <div class="no"></div>
                </div>
                
              </div>
              <div class="gengduo" @click="phonem(shoujiArr1.categoryId)">
                <span class="span">查看更多>></span>
                </div>
            </div>
          </div>
        </div>
        <div class="electrical">{{ shoujiArr2.categoryName }}</div>
        <div class="hot">热门</div>
        <div class="view">电视影音</div>
        <div class="two">
          <div class="phone-show">
            <div class="xiaomi">
            <div class="img-one" :style="{ 'background-image': 'url(http://www.codeedu.com.cn/' + shoujiArr2.categoryPicture1 }"></div>
              
              <div class="img-two" :style="{ 'background-image': 'url(http://www.codeedu.com.cn/' + shoujiArr2.categoryPicture2 }"></div>
            </div>
            <div class="more">
              <div class="card" v-for="item in picArr2" :key="item.productId" @click="dianshi(item.productId)">
                <div class="card-pic" :style="{ 'background-image': 'url(http://www.codeedu.com.cn/' + item.productPicture }">
                  <div class="mingzi">
                    {{ item.productName }}
                  </div>
                  <div class="jieshao">
                    {{ item.productTitle }}
                  </div>
                  <div class="price">{{ item.productSellingPrice }}</div>
                  <div class="noprice">{{ item.productPrice }}</div>
                  <div class="no"></div>
                </div>
              </div>
              <div class="gengduo" @click="phonem(shoujiArr2.categoryId)" >
                <span class="span" >查看更多>></span>
                </div>
            </div>
             
          </div>
        </div>
        <div class="peijian">{{ shoujiArr3.categoryName }}</div>
        <div class="three-hot">热门</div>
        <div class="protect">保护套</div>
        <div class="chong">充电器</div>
        <div class="three">
          <div class="phone-show">
            <div class="xiaomi">
            <div class="img-one" :style="{ 'background-image': 'url(http://www.codeedu.com.cn/' + shoujiArr3.categoryPicture1 }"></div>
              
              <div class="img-two" :style="{ 'background-image': 'url(http://www.codeedu.com.cn/' + shoujiArr2.categoryPicture2 }"></div>
            </div>
            <div class="more">
              <div class="card" v-for="item in picArr3" :key="item.productId" @click="peijian(item.productId)">
                <div class="card-pic" :style="{ 'background-image': 'url(http://www.codeedu.com.cn/' + item.productPicture }">
                  <div class="mingzi">
                    {{ item.productName }}
                  </div>
                  <div class="jieshao">
                    {{ item.productTitle }}
                  </div>
                  <div class="price">{{ item.productSellingPrice }}</div>
                  <div class="noprice">{{ item.productPrice }}</div>
                  <div class="no"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import { getRotation, product, hot } from '../api/api'
export default {
  name: 'mains',
  created() {
    this.getRotation()
    this.hot1()
    console.log("ddd",this.shoujiArr1);
  },
  data() {
    return {
      clearArr: [
        {
          url: ''
        }
      ],
      // //分类
      // fenlei:{
      //   categoryId: 0,
      //   categoryName: "",
      //   categoryPicture1: "",
      //   categoryPicture2: "",
      // },
      //商品
      shoujiArr1: {
      },
      shoujiArr2: {
        products: "",
        productId: 0,
        productIntro: "",
        productName: "",
        productPicture: "",
        productPrice: 0,
        productSellingPrice: 0,
        productTitle: "",
      },
      shoujiArr3: {
        products: "",
        productId: 0,
        productIntro: "",
        productName: "",
        productPicture: "",
        productPrice: 0,
        productSellingPrice: 0,
        productTitle: "",
      },
      picArr1: {},
      picArr2: {},
      picArr3: {},
      end:'',

    }
  },
  methods: {
    //轮播图
    getRotation() {
      getRotation().then(res => {
        console.log(res.data);
        this.clearArr = res.data.data

      })
    },
    //更多
    phonem(eeee){
      console.log(eeee);
        this.$router.push({
        path:'/allshop',
        query:{
          row:eeee
        }
         });
    },
    // //查询商品列表
    // product(){
    //   product().then(res=>{
    //     console.log(res);
    //     this.fenlei = res.rows;
    //     this.shoujiArr = res.rows.products;
    //   })
    // },
    //热门商品列表
    hot1() {
      hot().then(res => {
        console.log('dd', res);
        this.shoujiArr1 = res.data.rows[0];
        this.shoujiArr2 = res.data.rows[1];
        this.shoujiArr3 = res.data.rows[2];
        console.log("gg", this.shoujiArr1);
        this.picArr1 = res.data.rows[0].products
        this.picArr2 = res.data.rows[1].products
        this.picArr3 = res.data.rows[2].products
      })
    },
    phone(id){
      this.$router.push({
        path:'/ProductDetails',
        query:{
          rowo:id
        }
    });
    },
    dianshi(id){
      this.$router.push({
        path:'/ProductDetails',
        query:{
          rowt:id
        }
    });
    },
    peijian(id){
      this.$router.push({
        path:'/ProductDetails',
        query:{
          rowtt:id
        }
    });
    }

  },
}
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 456px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.roution {
  margin: auto;
  margin-top: 24px;
  width: 1200px;
  height: 456px;
  
}
.roution img {
    width: 1200px;
  height: 456px;
}
::v-deep.el-carousel,.el-carousel--horizontal{
  background-size: cover;
}
::v-deep.el-carousel__container{
  background-size: cover;
}
.show {
  margin-top: 32px;
  width: 100%;
  height: 2076px;
  background: #F5F5F5;
}

.all {
  height: 2036px;
  width: 1200px;
  margin: auto;
  position: relative;
}

.phone {
  position: absolute;
  top: 20px;
  font-style: normal;
  font-weight: 400;
  font-size: 22px;
  line-height: 100%;
  text-align: center;
  color: #333333;
}

.one {
  position: absolute;
  top: 62px;
}

.xiaomi {
  width: 232px;
  height: 614px;
  margin-right: 10px;
  
}
.img-one{
  width: 232px;
  height: 300px;
  background-size: cover;
}
.img-two{
  width: 232px;
  height: 300px;
  background-size: cover;
  margin-top: 12px;
}
.more {
  width: 968px;
  height: 614px;
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: 300px 300px;
  grid-gap: 11px 3px;
}

.phone-show {
  display: flex;
}

.card {
  width: 232px;
  height: 300px;
  background-color: #FFFFFF;
  position: relative;
}

.card-pic {
  width: 160px;
  height: 160px;
  background-image: url(../assets/Rectangle\ 138.png);
  position: absolute;
  left: 36px;
  top: 14px;
  background-size: cover;
}
.gengduo{
  font-family: 'PingFang SC';
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 110%;
  text-align: center;
  color: #000000;
  position: relative;
  background: #FFFFFF;
  width: 233px;
    
}
.span{
  position: absolute;
  font-family: 'PingFang SC';
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 110%;
  text-align: center;
  color: #000000;
  top: 140px;
  left: 66px;
}
.mingzi {
  height: 14px;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 100%;
  text-align: center;
  letter-spacing: 0.2px;
  color: #333333;
  position: absolute;
  top: 198px;
  left: 42px;
  overflow: hidden;
}

.jieshao {
  position: absolute;
  font-style: normal;
  height: 12px;
  font-weight: 500;
  font-size: 12px;
  line-height: 100%;
  text-align: center;
  letter-spacing: 0.1px;
  color: #B0B0B0;
  left: 10px;
  top: 226px;
}

.price {
  position: absolute;
  top: 250px;
  left: 30px;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 100%;
  text-align: center;
  letter-spacing: 0.1px;
  color: #FF6700;
}

.noprice {
  width: 68px;
  height: 16px;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 100%;
  text-align: center;
  color: #B0B0B0;
  position: absolute;
  top: 250px;
  left: 80px;
}

.no {
  width: 54px;
  height: 1px;
  background: #B0B0B0;
  position: absolute;
  top: 258px;
  left: 87px;
}



.electrical {
  position: absolute;
  top: 700px;
  font-style: normal;
  font-weight: 400;
  font-size: 22px;
  line-height: 100%;
  text-align: center;
  color: #333333;
}

.hot {
  position: absolute;
  top: 714px;
  left: 1056px;
  width: 32px;
  height: 16px;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  text-align: center;
  color: #FF6700;
}

.view {
  position: absolute;
  left: 1102px;
  top: 714px;
  width: 64px;
  height: 16px;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  text-align: center;
  color: #333333;

}

.two {
  position: absolute;
  top: 746px;
}

.electrical-show {
  display: flex;
}

.moret {
  width: 1200px;
  height: 614px;
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-template-rows: 300px 300px;
  grid-gap: 11px 3px;
}

.cardt {
  width: 232px;
  height: 300px;
  background-color: #FFFFFF;
  position: relative;
}

.three {
  position: absolute;
  top: 1430px;
}

.three-hot {
  position: absolute;
  top: 1398px;
  left: 1009px;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  text-align: center;
  color: #FF6700;

}

.chong {
  position: absolute;
  width: 48px;
  height: 16px;
  top: 1398px;
  left: 1128px;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  text-align: center;
  color: #333333;

}

.protect {
  position: absolute;
  top: 1398px;
  left: 1063px;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  text-align: center;
  color: #333333;
}

.peijian {
  position: absolute;
  top: 1384px;
  font-style: normal;
  font-weight: 400;
  font-size: 22px;
  line-height: 100%;
  text-align: center;
  color: #333333;
}
::v-deep.el-carousel__container{

}
</style>